
<template>
  <div>
    <div id="myChart"
         ref="myChart"
         :style="{width: '100%', height: '180px'}"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    formData: {},
    type: {},
    time: {
      type: String
    }
  },
  data () {
    return {};
  },
  watch: {
    formData: {
      handler (newVal, oldVal) {
        this.drawLine();
      },
      deep: true
    }
  },
  mounted () {
    this.drawLine();
  },
  methods: {
    drawLine () {
      let text = "";
      let text1 = "";
      // 初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart);
      let xData = this.formData.map(item => {
        return item.dictcode;
      });
      let yData1 = [];
      let yData2 = [];
      yData2 = this.formData.map(item => {
        return { value: item.ji, timekey: item.timekey };
      });
      let series = [];
      // if (this.type == 3) {

      // } else {
      //   if (this.type == 1) {
      //     text = "咨询人数";
      //   } else {
      //     text = "接收消息";
      //   }
      //   yData1 = this.formData.map(item => {
      //     return { value: item.count, timekey: item.timekey };
      //   });
      //   series = [
      //     {
      //       type: "line",
      //       // stack: "总量",
      //       smooth: 0.3,
      //       areaStyle: {
      //         normal: {
      //           color: "rgba(92, 219, 211, 1)" //改变区域颜色
      //         }
      //       },
      //       itemStyle: {
      //         normal: {
      //           color: "rgba(92, 219, 211, 1)", //改变折线点的颜色
      //           lineStyle: {
      //             color: "rgba(92, 219, 211, 1)" //改变折线颜色
      //           }
      //         }
      //       },
      //       data: yData1
      //     }
      //   ];
      // }
      text = "机器人";
      text1 = "人工";
      yData1 = this.formData.map(item => {
        return { value: item.ren, timekey: item.timekey };
      });
      series = [
        {
          type: "bar",
          // stack: "总量",
          smooth: 0.3,
          areaStyle: {
            normal: {
              color: "rgba(67, 156, 245, 1)" //改变区域颜色
            }
          },
          itemStyle: {
            normal: {
              color: "rgba(67, 156, 245, 1)", //改变折线点的颜色
              lineStyle: {
                color: "rgba(67, 156, 245, 1)" //改变折线颜色
              }
            }
          },
          data: yData2
        },
        {
          type: "line",
          // stack: "总量",
          smooth: 0.3,
          areaStyle: {
            normal: {
              color: "rgba(92, 219, 211, 1)" //改变区域颜色
            }
          },
          itemStyle: {
            normal: {
              color: "rgba(92, 219, 211, 1)", //改变折线点的颜色
              lineStyle: {
                color: "rgba(92, 219, 211, 1)" //改变折线颜色
              }
            }
          },
          data: yData1
        },
      ]; // 绘制图表
      myChart.setOption({
        title: {},
        tooltip: {
          showContent: true,
          trigger: "axis",
          formatter: params => {
            let str = "";
            if (this.type == 2) {
              str =
                params[0].data.timekey + "<br/>" + text + ":" + params[0].value;
            } else if (this.type == 1) {
              str =
                params[0].data.timekey + "<br/>" + text + ":" + params[0].value;
              // +
              // "<br/>" +
              // "转人工率" +
              // this.formData[params[0].dataIndex].lv +
              // "%";
            } else {
              let total =
                (Number(params[0].value) ? Number(params[0].value) : 0) +
                (Number(params[1].value) ? Number(params[1].value) : 0);
              let per = (
                (Number(params[1].value) ? Number(params[1].value) : 0) /
                total *
                100
              ).toFixed(2);
              str =
                params[0].data.timekey +
                "<br/>" +
                text1 +
                ":" +
                params[1].value +
                "<br/>" +
                text +
                ":" +
                params[0].value;
            }
            this.$emit("chooseDate", params[0].data.timekey);
            return str;
          }
          // axisPointer: {
          //   type: "cross",
          //   label: {
          //     backgroundColor: "#6a7985"
          //   }
          // }
        },
        grid: {
          left: "3%",
          top: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(115, 116, 141, 1)"
            }
          },
          axisLabel: {
            formatter: val => {
              if (this.time == 5) {
                return val + "月";
              } else {
                return val
              }
            },
            // textStyle: {
            //   color: '#73748D'
            // }
          },
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(115, 116, 141, 1)"
            }
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              color: ["rgba(73, 74, 92, 1)"]
            },
            show: false //隐藏或显示
          }
        },

        series: series
      });
    }
  }
};
</script>
 
<style scoped lang='less'>
.zhineng {
  background: #07cc94;
  width: 0.1rem;
  height: 0.1rem;
}
.zhuanren {
  background: #0095fd;
  width: 0.1rem;
  height: 0.1rem;
}
p {
  font-size: 0.2rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3d3d3d;
  margin-left: 0.1rem;
  /* float: left; */
}
</style>